<template>
  <div class="payment" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">支付管理</div>
      <div class="btn">
        <a-button v-if="configJurisdiction.add" type="primary" @click="openModal"><a-icon type="plus" />添加支付</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal"/>
    <div class="storeContent">
      <a-table :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="record => record.id">
        <span slot="staff" slot-scope="staff">{{staff && staff.name?staff.name:''}}</span>
        <span slot="event_type" slot-scope="event_type">
          {{event_type == 1?'线下支付':event_type == 2?'微信支付':event_type == 3?'支付宝支付':event_type == 4?'线上支付':'卡支付'}}
<!--          1线下支付 2微信支付 3支付宝支付 4线上支付 5卡支付-->
        </span>
        <span slot="empty">123</span>
        <span slot="area_no" slot-scope="area_no,record" class="operation">
          <span v-if="configJurisdiction.update" @click="editColumns(record)">编辑</span>
          <span v-if="configJurisdiction.del" @click="removeStore(record)">删除</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      cancelText="关闭"
      okText="保存">
      <AppendPayment v-if="visible" @sendData="getAppendData" ref="child" :appendData="configAppend"  />
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import { column, appendPayment } from './index'
  import Pagination from '@/common/pagination/index'
  import Search from '@/common/search/index'
  import AppendPayment from './appendPayment'
  export default {
    name:'payment',
    components:{
      Pagination,
      Search,
      AppendPayment
    },
    data(){
      return {
        visible:false,
        title:'添加支付',
        loading:false,
        client:null,
        page:1,
        total:0,
        edit_id:0,
        columns: column,
        columnsData:[],
        searchText:{},
        search:[
          {
            type:'input',
            name:'支付名称',
            place:'请输入名称',
            val:'',
            key:'name',
          },
        ],
        configAppend: [],
        jurisdiction:[
          { key:'admin-payment-add', back:'add'},
          { key:'admin-payment-update', back:'update'},
          { key:'admin-payment-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction);
    },

    methods:{
      getList(){
        let data = this.searchText;
        data.size = 10;
        data.page = this.page;
        this.Api.payment(data).then(res=>{
          if(res.code !== 200) return;
          this.total = res.data.total;
          this.columnsData = res.data.items
        })
      },
      openModal(){
        this.title = '添加支付';
        this.loading = false;
        appendPayment.forEach(item=>{
          item.val = ''
        });
        this.getType()
      },
      editColumns(e){
        this.edit_id = e.id;
        this.title = '编辑支付';
        appendPayment.forEach(item=>{
          item.val = e[item.key];
        });
        this.getType()
      },
      getType(){
        this.configAppend = appendPayment;
        this.visible = true;
      },
      removeStore(e){
        this.$confirm({
          title: '确定删除当前记录?',
          cancelText: '取消',
          okText:'删除',
          onOk:()=> {
            this.Api.removePayment({},e.id).then(res=>{
              if(res.code !== 200) return this.$message.info(res.msg);
              this.$message.success(res.msg);
              this.getList()
            })
          }
        })
      },
      getAppendData(e){
        this.loading = true;
        if(this.title === '添加支付') return this.Api.appendPayment(e).then(res=>{
          this.loading = false;
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        });
        this.Api.editPayment(e,this.data.edit_id).then(res=>{
          this.loading = false;
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          this.getList()
        })
      },
      modalChange(e){
        if(e === 1) return this.visible = false;
        this.$refs.child.sendData();
      },
      pageSize(e){
        this.page = e;
        this.getList()
      },
      searchVal(e){
        this.searchText = e;
        this.getList()
      },
    }
  }
</script>
